<template>
  <view>
    <view class="wrapper">
      <!-- 头部导航栏 -->
      <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
         <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @tap="goBack" />
        <text class="title">房贷计算器</text>
      </view>
      <view class="titleWrapper">
        <view class="titleItem">
          <p class="leftT1">房贷计算器</p>
          <p class="leftT2">专业的房贷计算软件</p>
        </view>
        <image src="http://xcxtp.njmswl.com/images/index/calcu.png" class="calculateImg" />
      </view>
      <view class="screen">
        <view class="screenItem" v-for="(item, index) in loanArr" :key="index">
          <text
            class="screen-text"
            :class="{ textActive: index == loanArrIndex }"
            @click="changeIndex(index)"
            >{{ item }}</text
          >
          <text :class="{ line: index == loanArrIndex }"></text>
        </view>
      </view>
    </view>
    <scroll-view class="scroll-view" scroll-y>
      <!-- 商业贷款 -->
      <view class="content" v-if="loanArrIndex == 0">
        <view class="item mb30">
          <view class="calcMethod">
            <view class="topItem">计算方式</view>
            <view
              class="topItem"
              v-for="(item, index) in calcMethod"
              :key="index"
              @click="circleClick(index)"
            >
              <view class="circle" :class="{ activeCircle: index == calcMethodIndex }">
                <view :class="{ circle1: index == calcMethodIndex }"></view>
              </view>
              {{ item }}
            </view>
          </view>
          <view class="hr"></view>
          <view class="calcMethod" v-if="calcMethodIndex == 1">
            <view class="amount">房屋总价</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="TotalPropertyPrice"
              />万
            </view>
          </view>
          <hr class="hr" v-if="calcMethodIndex == 1" />
          <view class="calcMethod" v-if="calcMethodIndex == 1">
            <view class="amount">首付选择</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedRadioIndex"
                :range="radio"
                @change="handleRadioChange"
              >
                <view class="picker">
                  <text>{{ radio[selectedRadioIndex] }}</text
                  >%
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
          <hr class="hr" v-if="calcMethodIndex == 1" />
          <view class="calcMethod">
            <view class="amount">贷款金额</view>
            <view class="amount">
              <input type="text" class="amountInput" placeholder="0" v-model="LoanAmount" />万
            </view>
          </view>
          <hr class="hr" v-if="calcMethodIndex == 0" />
          <view class="calcMethod" v-if="calcMethodIndex == 0">
            <view class="amount">商贷年限</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedCommercialLoanTenureIndex"
                :range="commercialLoanTenures"
                @change="handleCommercialLoanTenureChange"
              >
                <view class="picker">
                  <text>{{ commercialLoanTenures[selectedCommercialLoanTenureIndex] }}</text
                  >年
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
        </view>
        <view class="item">
          <view class="calcMethod" v-if="calcMethodIndex == 1">
            <view class="amount">商贷年限</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedCommercialLoanTenureIndex"
                :range="commercialLoanTenures"
                @change="handleCommercialLoanTenureChange"
              >
                <view class="picker">
                  <text>{{ commercialLoanTenures[selectedCommercialLoanTenureIndex] }}</text
                  >年
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
          <hr class="hr" v-if="calcMethodIndex == 1" />
          <view class="calcMethod">
            <view class="amount">利率方式</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedRateTypeIndex"
                :range="RateType"
                @change="handleRateTypeChange"
              >
                <view class="picker">
                  <text>{{ RateType[selectedRateTypeIndex] }}</text>
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">商贷利率</view>
            <view class="amount">
              <input type="text" class="amountInput" placeholder="0" v-model="Radio" />%
            </view>
          </view>
        </view>
        <open-program></open-program>
        <view class="calcBtn">
          <view class="btn" @click="calculateMortgage">开始计算</view>
        </view>
      </view>
      <!-- 商业贷款计算结果 -->
      <view class="content" style="padding-top: 30rpx" v-if="loanArrIndex === 0 && isCaculate">
        <view style="display: flex; justify-content: center; align-items: center; margin: 10rpx 0"
          >等额本息还款计算结果</view
        >
        <view class="item mb30">
          <view class="calcMethod">
            <view class="amount">贷款总额</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="LoanAmountDisplay"
                placeholder="0"
              />元
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">还款月数</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="monthlyPaymentDisplay"
                placeholder="0"
              />月</view
            >
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">每月还款</view>
            <view class="amount"
              ><input type="text" class="amountInput" v-model="monthlyPayment" placeholder="0" />元
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">总支付利息</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="totalInterest"
              />元</view
            >
          </view>
          <view class="calcMethod">
            <view class="amount">本息合计</view>
            <view class="amount"
              ><input type="text" class="amountInput" placeholder="0" v-model="totalRepayment" />元
            </view>
          </view>
        </view>
      </view>
      <!-- 组合贷款 -->
      <view class="content" v-if="loanArrIndex == 1">
        <view class="item mb30">
          <view class="calcMethod">
            <view class="topItem">计算方式</view>
            <view
              class="topItem"
              v-for="(item, index) in calcMethod"
              :key="index"
              @click="circleClick(index)"
            >
              <view class="circle" :class="{ activeCircle: index == calcMethodIndex }">
                <view :class="{ circle1: index == calcMethodIndex }"></view>
              </view>
              {{ item }}
            </view>
          </view>
          <hr class="hr" v-if="calcMethodIndex == 1" />
          <view class="calcMethod" v-if="calcMethodIndex == 1">
            <view class="amount">房屋总价</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="CombinedLoanPropertyTotalPrice"
              />万</view
            >
          </view>
          <hr class="hr" />
          <view class="calcMethod" v-if="calcMethodIndex == 1">
            <view class="amount">首付选择</view>
            <picker
              mode="selector"
              :value="selectedRadioIndex"
              :range="radio"
              @change="handleRadioChange"
            >
              <view class="picker">
                <text>{{ radio[selectedRadioIndex] }}</text
                >%
                <image
                  src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                  class="rightArrow"
                />
              </view>
            </picker>
          </view>
          <hr class="hr" v-if="calcMethodIndex == 1" />
          <view class="calcMethod">
            <view class="amount">贷款金额</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="CombinedTotalLoanAmount"
              />万</view
            >
          </view>
        </view>
        <view class="item mb30">
          <view class="calcMethod">
            <view class="amount">公积金金额</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="CombinedProvidentFundAmount"
              />万</view
            >
          </view>
          <view class="hr"></view>
          <view class="calcMethod">
            <view class="amount">公积金年限</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedProvidentFundTenureIndex"
                :range="ProvidentFundTenure"
                @change="handleProvidentFundTenureChange"
              >
                <view class="picker">
                  <text>{{ ProvidentFundTenure[selectedProvidentFundTenureIndex] }}</text
                  >年
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
          <view class="hr"></view>
          <view class="calcMethod">
            <view class="amount">公积金利率</view>
            <view class="amount">
              <input type="text" class="amountInput" placeholder="0" v-model="ProvidentFundRate" />%
            </view>
          </view>
        </view>
        <view class="item">
          <view class="calcMethod">
            <view class="amount">商贷金额</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="CombinedCommercialLoanAmount"
                placeholder="0"
              />万</view
            >
          </view>
          <view class="hr"></view>
          <view class="calcMethod">
            <view class="amount">商贷年限</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedCommercialLoanTenureIndex"
                :range="commercialLoanTenures"
                @change="handleCommercialLoanTenureChange"
              >
                <view class="picker">
                  <text>{{ commercialLoanTenures[selectedCommercialLoanTenureIndex] }}</text
                  >年
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>

          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">利率方式</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedRateTypeIndex"
                :range="RateType"
                @change="handleRateTypeChange"
              >
                <view class="picker">
                  <text>{{ RateType[selectedRateTypeIndex] }}</text>
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">商贷利率</view>
            <view class="amount">
              <input type="text" class="amountInput" placeholder="0" v-model="Radio" />%
            </view>
          </view>
        </view>
        <open-program></open-program>
        <view class="calcBtn">
          <view class="btn" @click="combinatorialCalculation">开始计算</view>
        </view>
      </view>

      <!-- 组合贷款计算结果 -->
      <view
        class="content"
        style="padding-top: 30rpx"
        v-if="loanArrIndex === 1 && CombinedLoanCalculationResults"
      >
        <view style="display: flex; justify-content: center; align-items: center; margin: 10rpx 0"
          >等额本息还款计算结果</view
        >
        <view class="item mb30">
          <view class="calcMethod">
            <view class="amount">贷款总额</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="CombinedTotalLoanAmountDisplay"
                placeholder="0"
              />元
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">每月还款</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="CombinedMonthlyRepayment"
                placeholder="0"
              />元
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">公积金贷款月供</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="providentFundMonthlyPaymentComputed"
                placeholder="0"
              />元
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">商贷月供</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="commercialLoanMonthlyPaymentComputed"
                placeholder="0"
              />元
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">总支付利息</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="combinedTotalInterestComputed"
              />元</view
            >
          </view>
          <view class="calcMethod">
            <view class="amount">本息合计</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="combinedTotalAmortizationComputed"
              />元
            </view>
          </view>
        </view>
      </view>
      <!-- 公积金贷款 -->
      <view class="content" v-if="loanArrIndex == 2">
        <view class="item mb30">
          <view class="calcMethod">
            <view class="topItem">计算方式</view>
            <view
              class="topItem"
              v-for="(item, index) in calcMethod"
              :key="index"
              @click="circleClick(index)"
            >
              <view class="circle" :class="{ activeCircle: index == calcMethodIndex }">
                <view :class="{ circle1: index == calcMethodIndex }"></view>
              </view>
              {{ item }}
            </view>
          </view>
          <view class="hr"></view>
          <view class="calcMethod" v-if="calcMethodIndex == 1">
            <view class="amount">房屋总价</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="ProvidentFundPropertyTotalPrice"
                placeholder="0"
              />万</view
            >
          </view>
          <hr class="hr" v-if="calcMethodIndex == 1" />
          <view class="calcMethod" v-if="calcMethodIndex == 1">
            <view class="amount">首付选择</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedRadioIndex"
                :range="radio"
                @change="handleRadioChange"
              >
                <view class="picker">
                  <text>{{ radio[selectedRadioIndex] }}</text
                  >%
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
          <hr class="hr" v-if="calcMethodIndex == 1" />
          <view class="calcMethod" v-if="calcMethodIndex == 1">
            <view class="amount">公积金贷款金额</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="ProvidentFundLoanAmount"
              />万</view
            >
          </view>
          <view class="calcMethod" v-if="calcMethodIndex == 0">
            <view class="amount">公积金贷款金额</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="ProvidentFundLoanAmount"
              />万</view
            >
          </view>
          <hr class="hr" v-if="calcMethodIndex == 0" />
          <view class="calcMethod" v-if="calcMethodIndex == 0">
            <view class="amount">公积金年限</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedProvidentFundTenureIndex"
                :range="ProvidentFundTenure"
                @change="handleProvidentFundTenureChange"
              >
                <view class="picker">
                  <text>{{ ProvidentFundTenure[selectedProvidentFundTenureIndex] }}</text
                  >年
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
          <hr class="hr" v-if="calcMethodIndex == 0" />
          <view class="calcMethod" v-if="calcMethodIndex == 0">
            <view class="amount">公积金利率</view>
            <view class="amount">
              <input type="text" class="amountInput" placeholder="0" v-model="ProvidentFundRate" />%
            </view>
          </view>
        </view>
        <view class="item" v-if="calcMethodIndex == 1">
          <view class="calcMethod">
            <view class="amount">公积金年限</view>
            <view class="amount">
              <picker
                mode="selector"
                :value="selectedProvidentFundTenureIndex"
                :range="ProvidentFundTenure"
                @change="handleProvidentFundTenureChange"
              >
                <view class="picker">
                  <text>{{ ProvidentFundTenure[selectedProvidentFundTenureIndex] }}</text
                  >年
                  <image
                    src="http://xcxtp.njmswl.com/images/index/rightArrow.png"
                    class="rightArrow"
                  />
                </view>
              </picker>
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">公积金利率</view>
            <view class="amount">
              <input type="text" class="amountInput" placeholder="0" v-model="ProvidentFundRate" />%
            </view>
          </view>
        </view>
        <open-program></open-program>
        <view class="calcBtn">
          <view class="btn" @click="calculateProvidentFundLoan">开始计算</view>
        </view>
      </view>
      <!-- 公积金贷款计算结果 -->
      <view
        class="content"
        style="padding-top: 30rpx"
        v-if="loanArrIndex === 2 && ProvidentFundLoanCalculationResults"
      >
        <view style="display: flex; justify-content: center; align-items: center; margin: 10rpx 0"
          >等额本息还款计算结果</view
        >
        <view class="item mb30">
          <view class="calcMethod">
            <view class="amount">贷款总额</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="ProvidentFundLoanAmountDisplay"
                placeholder="0"
              />元
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">还款月数</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="ProvidentFundMonthlyDisplay"
                placeholder="0"
              />月</view
            >
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">每月还款</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                v-model="ProvidentFundmonthlyPaymentDisplay"
                placeholder="0"
              />元
            </view>
          </view>
          <hr class="hr" />
          <view class="calcMethod">
            <view class="amount">总支付利息</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="ProvidentFundtotalInterestDisplay"
              />元</view
            >
          </view>
          <view class="calcMethod">
            <view class="amount">本息合计</view>
            <view class="amount"
              ><input
                type="text"
                class="amountInput"
                placeholder="0"
                v-model="ProvidentFundtotalRepaymentDisplay"
              />元
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
import { ref, onMounted, watchEffect, computed } from 'vue'
import { onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
import openProgram from '../components/openProgram.vue'
const isCaculate = ref(0) //用来展示计算结果

const loanArrResultIndex = ref(1)
const LoanAmount = ref('') // //贷款金额
const LoanAmountDisplay = ref('')
const commercialLoanTenures = ref([10, 20, 30])
const radio = ref([10, 20, 30, 40]) //表示首付选择比例
const selectedRadioIndex = ref(0) //首付选择下标
const selectedCommercialLoanTenureIndex = ref(0)
const monthlyPaymentDisplay = ref('') // 初始化
const TotalPropertyPrice = ref('') //房屋总价
const goBack = () => {
  uni.switchTab({
    url: '/pages/index/index'  // 这里的url是你首页的路径，根据你的项目实际情况进行修改
});
};
//贷款金额根据房屋总价和首付比例而动态变化
watchEffect(() => {
  console.log('55555>>>>>>>>>贷款金额根据房屋总价和首付比例而动态变化', TotalPropertyPrice.value)
  if (TotalPropertyPrice.value && !isNaN(TotalPropertyPrice.value)) {
    // 确保TotalPropertyPrice有值且为数字
    const houseRadio = radio.value[selectedRadioIndex.value] * 0.01
    console.log('55555贷款金额根据房屋总价和首付比例而动态变化', TotalPropertyPrice.value)
    LoanAmount.value = (1 - houseRadio) * TotalPropertyPrice.value // 计算贷款金额
    LoanAmountDisplay.value = parseFloat(LoanAmount.value) * 10000 || 0
  } else {
    // LoanAmount.value = 0; // 如果房屋总价无效，则重置贷款金额
    LoanAmountDisplay.value = parseFloat(LoanAmount.value) * 10000 || 0
  }
})
// LoanAmount.value = parseInt(TotalPropertyPrice.value)-radio[selectedRadioIndex.value]*parseInt(TotalPropertyPrice.value)
watchEffect(() => {
  LoanAmountDisplay.value = parseFloat(LoanAmount.value) * 10000 || 0 // 当LoanAmount变化时，自动更新LoanAmountDisplay
  monthlyPaymentDisplay.value =
    commercialLoanTenures.value[selectedCommercialLoanTenureIndex.value] * 12 || 0
})
const Radio = ref('') //商贷利率

const RateType = ref(['最新基准利率', '最新基准利率7折', '最新基准利率8折', '最新基准利率1.1倍'])
const CommercialLoanRate = ref(['4.90', '3.43', '3.92', '5.39'])
const loanArrIndex = ref(0)
const calcMethodIndex = ref(0)
const menu = ref({})
const loanArr = ref(['商业贷款', '组合贷款', '公积金贷款'])
const calcMethod = ref(['按贷款总额', '按房屋总价'])

const selectedRateTypeIndex = ref(0)
Radio.value = CommercialLoanRate.value[selectedRateTypeIndex.value]

const totalInterest = ref('')
const totalRepayment = ref('')
const monthlyPayment = ref('')
const calculateMortgage = () => {
  isCaculate.value = 1

  const loanAmountParse = parseFloat(LoanAmount.value) * 10000 || 0

  const loanYears = commercialLoanTenures.value[selectedCommercialLoanTenureIndex.value]
  const annualInterestRate = CommercialLoanRate.value[selectedRateTypeIndex.value]

  const monthlyInterestRate = parseFloat(annualInterestRate) / 100 / 12
  const numberOfPayments = loanYears * 12

  const monthlyPaymentCalc =
    (loanAmountParse *
      (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments))) /
    (Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1)
  const totalInterestCalc = monthlyPaymentCalc * numberOfPayments - loanAmountParse
  const totalRepaymentCalc = monthlyPaymentCalc * numberOfPayments

  monthlyPayment.value = monthlyPaymentCalc.toFixed(2)
  totalInterest.value = totalInterestCalc.toFixed(2)
  totalRepayment.value = totalRepaymentCalc.toFixed(2)

}
//-----------------------------------公积金贷款计算-----------------------------------------
const ProvidentFundLoanCalculationResults = ref(0) //公积金贷款计算结果展示
const ProvidentFundRate = ref('') //公积金利率
const ProvidentFundTenure = ref([10, 20, 30, 40, 50, 60]) //公积金年限
const ProvidentFundPropertyTotalPrice = ref('') //房屋总价
const selectedProvidentFundTenureIndex = ref(0)
const ProvidentFundLoanAmount = ref('') //公积金贷款金额
const ProvidentFundLoanAmountDisplay = ref('') //公积金贷款金额展示
const ProvidentFundMonthlyDisplay = ref('') //还款月数展示
const ProvidentFundmonthlyPaymentDisplay = ref('') //每月还款金额
const ProvidentFundtotalInterestDisplay = ref('') //总支付利息
const ProvidentFundtotalRepaymentDisplay = ref('') //本息合计
watchEffect(() => {
  ProvidentFundLoanAmountDisplay.value = parseFloat(ProvidentFundLoanAmount.value) * 10000 || 0 // 当LoanAmount变化时，自动更新LoanAmountDisplay
  ProvidentFundMonthlyDisplay.value =
    ProvidentFundTenure.value[selectedProvidentFundTenureIndex.value] * 12 || 0
})

const calculateProvidentFundLoan = () => {
  ProvidentFundLoanCalculationResults.value = 1
  // 确保所有值都已初始化并转换为正确的数值类型
  const loanAmount = parseFloat(ProvidentFundLoanAmountDisplay.value)
  const loanTenureInMonths = parseInt(ProvidentFundMonthlyDisplay.value)
  const annualInterestRate = parseFloat(ProvidentFundRate.value)

  // 将年利率转换为月利率
  const monthlyInterestRate = annualInterestRate / 100 / 12

  // 计算每月还款额
  const ProvidentFundmonthlyPayment =
    (loanAmount * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, loanTenureInMonths))) /
    (Math.pow(1 + monthlyInterestRate, loanTenureInMonths) - 1)
  // 计算总支付利息
  const totalInterest = ProvidentFundmonthlyPayment * loanTenureInMonths - loanAmount
  // 本息合计
  const totalRepayment = ProvidentFundmonthlyPayment * loanTenureInMonths
  // 更新显示值
  ProvidentFundmonthlyPaymentDisplay.value = ProvidentFundmonthlyPayment.toFixed(2)
  ProvidentFundtotalInterestDisplay.value = totalInterest.toFixed(2)
  ProvidentFundtotalRepaymentDisplay.value = totalRepayment.toFixed(2)
}

//贷款金额根据房屋总价和首付占比计算
watchEffect(() => {
  console.log('公积金模块')
  if (ProvidentFundPropertyTotalPrice.value && !isNaN(ProvidentFundPropertyTotalPrice.value)) {
    // 确保TotalPropertyPrice有值且为数字
    console.log('dssssssssssssssssss')
    const houseRadio = radio.value[selectedRadioIndex.value] * 0.01
    ProvidentFundLoanAmount.value = (1 - houseRadio) * ProvidentFundPropertyTotalPrice.value // 计算贷款金额
    // LoanAmountDisplay.value = parseFloat(CombinedTotalLoanAmount.value) * 10000 || 0;
    console.log('dssssssssssssssssssssssssdsa', ProvidentFundLoanAmount.value)
  } else {
    ProvidentFundLoanAmount.value = 0 // 如果房屋总价无效，则重置贷款金额
    // LoanAmountDisplay.value = parseFloat(CombinedTotalLoanAmount.value) * 10000 || 0;
  }
})
//-----------------------------------公积金贷款计算结束----------------------------------------
//------------------------------------组合贷款计算-----------------------------------------------
const CombinedLoanCalculationResults = ref(0) //用来展示贷款计算结果
const CombinedLoanPropertyTotalPrice = ref('') //组合贷款》按房屋总价》房屋总价
const CombinedTotalLoanAmount = ref('') //组合贷款》按房屋总价》贷款金额
const CombinedTotalLoanAmountDisplay = ref('') //贷款金额展示
const CombinedProvidentFundAmount = ref('') //公积金金额
const CombinedCommercialLoanAmount = ref('') //商贷金额
const CombinedMonthlyRepayment = ref('') //组合每月还款
const providentFundMonthlyPaymentComputed = ref('') //公积金贷款月供
const commercialLoanMonthlyPaymentComputed = ref('') //商贷月供
const combinedTotalInterest = ref('')
const combinedTotalInterestComputed = ref('') //总支付利息

const combinedTotalAmortizationComputed = ref('') //本息合计
const combinedTotalAmortization = ref('')
//利率方式和商贷利率  参考商业贷款计算
//商贷金额=贷款金额-公积金金额
// 计算属性用于自动计算组合贷款总额
watchEffect(() => {
  CombinedCommercialLoanAmount.value =
    Number(CombinedTotalLoanAmount.value) - Number(CombinedProvidentFundAmount.value)
})

watchEffect(() => {
  CombinedTotalLoanAmountDisplay.value = Number(CombinedTotalLoanAmount.value) * 10000
})

//根据房屋总价以及首付占比计算贷款金额
watchEffect(() => {
  if (CombinedLoanPropertyTotalPrice.value && !isNaN(CombinedLoanPropertyTotalPrice.value)) {
    // 确保TotalPropertyPrice有值且为数字
    const houseRadio = radio.value[selectedRadioIndex.value] * 0.01
    CombinedTotalLoanAmount.value = (1 - houseRadio) * CombinedLoanPropertyTotalPrice.value // 计算贷款金额
    // LoanAmountDisplay.value = parseFloat(CombinedTotalLoanAmount.value) * 10000 || 0;
  } else {
    CombinedTotalLoanAmount.value = '' // 如果房屋总价无效，则重置贷款金额
    // LoanAmountDisplay.value = parseFloat(CombinedTotalLoanAmount.value) * 10000 || 0;
  }
})

const combinatorialCalculation = () => {
  console.log('公积金金额', CombinedProvidentFundAmount.value)
  console.log('公积金年限', ProvidentFundTenure.value[selectedProvidentFundTenureIndex.value])
  console.log('公积金利率', ProvidentFundRate.value)
  console.log('商贷年限', commercialLoanTenures.value[selectedCommercialLoanTenureIndex.value])
  console.log('商贷利率', Radio.value)
  console.log('商贷金额', CombinedCommercialLoanAmount.value)

  // 计算公积金贷款月供
  providentFundMonthlyPaymentComputed.value = computed(() => {
    const P = parseFloat(CombinedProvidentFundAmount.value)
    const n = parseFloat(ProvidentFundTenure.value[selectedProvidentFundTenureIndex.value]) * 12
    const r = parseFloat(ProvidentFundRate.value) / 100 / 12
    return (((P * (r * Math.pow(1 + r, n))) / (Math.pow(1 + r, n) - 1)) * 10000).toFixed(2)
  })

  // 计算商贷月供
  commercialLoanMonthlyPaymentComputed.value = computed(() => {
    const P = parseFloat(CombinedCommercialLoanAmount.value)
    const n = parseFloat(commercialLoanTenures.value[selectedCommercialLoanTenureIndex.value]) * 12
    const r = parseFloat(Radio.value) / 100 / 12
    return (((P * (r * Math.pow(1 + r, n))) / (Math.pow(1 + r, n) - 1)) * 10000).toFixed(2)
  })

  // 计算公积金贷款总支付利息和本息合计
  const providentFundTotalInterestComputed = computed(() => {
    const monthlyPayment = parseFloat(providentFundMonthlyPaymentComputed.value.value)
    const totalPayments =
      parseFloat(ProvidentFundTenure.value[selectedProvidentFundTenureIndex.value]) * 12
    const totalInterest =
      monthlyPayment * totalPayments - parseFloat(CombinedProvidentFundAmount.value)
    return totalInterest
  })

  const providentFundTotalAmortizationComputed = computed(() => {
    return (
      parseFloat(providentFundMonthlyPaymentComputed.value.value) *
      parseFloat(ProvidentFundTenure.value[selectedProvidentFundTenureIndex.value]) *
      12
    )
  })

  // 计算商贷总支付利息和本息合计
  const commercialLoanTotalInterestComputed = computed(() => {
    const monthlyPayment = parseFloat(commercialLoanMonthlyPaymentComputed.value.value)
    const totalPayments =
      parseFloat(commercialLoanTenures.value[selectedCommercialLoanTenureIndex.value]) * 12
    const totalInterest =
      monthlyPayment * totalPayments - parseFloat(CombinedCommercialLoanAmount.value)
    return totalInterest
  })

  const commercialLoanTotalAmortizationComputed = computed(() => {
    return (
      parseFloat(commercialLoanMonthlyPaymentComputed.value.value) *
      parseFloat(commercialLoanTenures.value[selectedCommercialLoanTenureIndex.value]) *
      12
    )
  })

  // 计算合并后的总支付利息
  combinedTotalInterest.value = computed(() => {
    return providentFundTotalInterestComputed.value + commercialLoanTotalInterestComputed.value
  })
  watchEffect(() => {
    combinedTotalInterestComputed.value = (
      combinedTotalInterest.value.value - CombinedTotalLoanAmountDisplay.value
    ).toFixed(2)
  })
  // 计算合并后的本息合计
  combinedTotalAmortization.value = computed(() => {
    return (
      providentFundTotalAmortizationComputed.value + commercialLoanTotalAmortizationComputed.value
    ).toFixed(2)
  })
  watchEffect(() => {
    combinedTotalAmortizationComputed.value = combinedTotalAmortization.value.value
  })
  //每月还款 = 公积金贷款月供+商贷月供
  watchEffect(() => {
    CombinedMonthlyRepayment.value = (
      Number(providentFundMonthlyPaymentComputed.value.value) +
      Number(commercialLoanMonthlyPaymentComputed.value.value)
    ).toFixed(2)
  })

  CombinedLoanCalculationResults.value = 1
}

//-----------------------------------组合贷款计算结束----------------------------------------------

onMounted(() => {
  menu.value = uni.getMenuButtonBoundingClientRect()
})

const changeIndex = (index) => {
  loanArrIndex.value = index
}

const circleClick = (index) => {
  isCaculate.value = 0
  ProvidentFundLoanCalculationResults.value = 0
  CombinedLoanCalculationResults.value = 0
  calcMethodIndex.value = index
  LoanAmount.value = ''
  TotalPropertyPrice.value = ''
  ProvidentFundLoanAmount.value = ''
  ProvidentFundRate.value = ''
  ProvidentFundPropertyTotalPrice.value = ''
  CombinedLoanPropertyTotalPrice.value = ''
  CombinedTotalLoanAmount.value = ''
}
const handleCommercialLoanTenureChange = (e) => {
  selectedCommercialLoanTenureIndex.value = e.detail.value
}
const handleProvidentFundTenureChange = (e) => {
  selectedProvidentFundTenureIndex.value = e.detail.value
}
const handleRadioChange = (e) => {
  selectedRadioIndex.value = e.detail.value
}
const handleRateTypeChange = (e) => {
  selectedRateTypeIndex.value = e.detail.value
  Radio.value = CommercialLoanRate.value[selectedRateTypeIndex.value]
}


//uniapp微信小程序分享页面到微信好友
onShareAppMessage(()=>{

})
//uniapp微信小程序分享页面到微信朋友圈

onShareTimeline(()=>{

})
</script>

<style scoped lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}
.wrapper {
  background-color: #d9f5ec;
  padding-top: 8rpx;

  .navbar {
    /* margin-top: 8rpx; */
    background-color: #d9f5ec;
    background-size: cover;
    display: flex;
    padding-right: 37rpx;
    padding-bottom: 37rpx;
     .goBack {
    width: 18rpx;
    height: 30rpx;
    margin-left: 56rpx;
    margin-top: 7rpx;
  }

    .title {
      margin:0 auto;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 36rpx;
      color: #000000;
    }
  }

  .titleWrapper {
    display: flex;
    align-items: center;

    .titleItem {
      float: left;
      margin-left: 28rpx;
      margin-right: 120rpx;

      .leftT1 {
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 65rpx;
        color: #000000;
        padding-bottom: 20rpx;
      }

      .leftT2 {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #7d8495;
      }
    }

    .calculateImg {
      float: right;
      width: 201rpx;
      height: 196rpx;
    }
  }

  .screen {
    position: relative;
    display: flex;
    width: 100%;
    padding-top: 43rpx;
    padding-bottom: 34rpx;

    .screenItem {
      width: 33%;
      display: flex;
      justify-content: center;
      align-items: center;

      .textActive {
        font-family: PingFang SC;
        font-weight: 550;
        font-size: 28rpx;
        color: #000000;
      }

      .screen-text {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #7d8495;
      }

      .line {
        position: absolute;
        bottom: 0;
        width: 27rpx;
        height: 4rpx;
        background: #16c686;
        border-radius: 2rpx;
      }
    }
  }
}

.content {
  height: auto;
  background-color: #f4f5fd;

  .item {
    width: 697rpx;
    height: auto;
    background: #ffffff;
    border-radius: 25rpx;
    border: 2px solid #ffffff;
    margin-left: 26rpx;
    padding-left: 28rpx;

    font-family: PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;

    .calcMethod {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 640rpx;
      height: 109rpx;

      .amount {
        display: flex;
        align-items: center;

        .rightArrow {
          margin-left: 10rpx;
          width: 12rpx;
          height: 21rpx;
        }
      }

      .topItem {
        display: flex;
        align-items: center;

        .circle {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 42rpx;
          height: 42rpx;
          background: #ffffff;
          border-radius: 50%;
          border: 2px solid #d2d2d2;
          margin-right: 13rpx;

          .circle1 {
            width: 22rpx;
            height: 22rpx;
            background: #61c28b;
            border-radius: 50%;
          }
        }

        .activeCircle {
          width: 42rpx;
          height: 42rpx;
          border-radius: 50%;
          border: 2px solid #61c28b;
        }
      }
    }

    .hr {
      width: 645rpx;
      height: 1rpx;
      background: #ffffff;
      border: 1rpx solid #f6f6f6;
    }
  }

  .mb30 {
    margin-bottom: 30rpx;
  }
}

.calcBtn {
  width: 750rpx;
  height: 190rpx;
  background: #ffffff;
  padding-left: 27rpx;
  padding-top: 38rpx;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #ffffff;

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 695rpx;
    height: 100rpx;
    background: #3bc48b;
    border-radius: 50rpx;
  }
}
</style>
